import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    Column {
        anchors.centerIn: parent
        spacing: 10

        TextArea {
            id: autoSaveTextArea
            width: 400
            height: 300
            placeholderText: "输入会自动保存的内容..."

            // 自定义属性，用于存储已保存的文本和标记是否修改
            property string savedText: ""
            property bool isModified: false

            // 定时器，用于触发自动保存
            Timer {
                id: saveTimer
                interval: 3000 // 每3秒检查一次
                running: autoSaveTextArea.isModified // 仅当内容被修改后才运行
                repeat: true // 持续运行（只要running为true）
                onTriggered: {
                    // 执行保存逻辑
                    autoSaveTextArea.savedText = autoSaveTextArea.text
                    autoSaveTextArea.isModified = false // 重置修改标记
                    saveStatus.text = "内容已自动保存" // 更新状态提示
                    saveStatus.color = "#4CAF50" // 绿色表示成功
                    fadeOutAnimation.restart() // 启动状态文本淡出动画
                }
            }

            // 当文本内容发生变化时触发
            onTextChanged: {
                // 只有当当前文本与已保存文本不同时，才标记为已修改
                if (text !== savedText) {
                    isModified = true
                    saveStatus.text = "正在编辑..." // 更新状态提示
                    saveStatus.color = "#FFA500" // 橙色表示编辑中
                    saveStatus.opacity = 1 // 确保状态文本可见
                    // 注意：这里不需要手动启动Timer，它的running属性绑定了isModified
                }
            }

            // 组件加载完成时执行，模拟加载之前保存的内容
            Component.onCompleted: {
                // 实际应用中，这里会从文件或数据库加载内容
                text = "这是之前保存的内容。\n继续编辑..."
                savedText = text // 初始化savedText
            }
        }

        // 用于显示保存状态的文本
        Text {
            id: saveStatus
            text: "准备就绪"
            color: "#4CAF50"
            font.pixelSize: 14
            anchors.horizontalCenter: parent.horizontalCenter
            opacity: 1 // 初始不透明

            // 淡出动画，用于“自动保存”提示
            NumberAnimation {
                id: fadeOutAnimation
                target: saveStatus
                property: "opacity"
                from: 1.0
                to: 0.0
                duration: 2000 // 动画持续2秒
                easing.type: Easing.InOutQuad
            }
        }
    }
}
